<template>
	<view>
		<camera-list :deviceCore="deviceCore"></camera-list>
		<view v-for="(sensor,sensorIndex) in sensorList" :key="sensorIndex">
			<explain :sensor="sensor" :deviceCore="deviceCore" :deviceName="deviceName"></explain>
		</view>

		<view v-if="getDateInfo.show" @tap="getDate" class="cu-avatar round lg light bg-white"
			:style="[{backgroundColor:themeConfig.primaryColor}]"
			style="position:fixed !important;z-index: 1024;right:20rpx;bottom: 140rpx">
			<view class="text-lg"><text class="cuIcon-refresh text-white"></text></view>
		</view>

		<view class="cu-modal bottom-modal" :class="showErrorModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideErrorModal">{{$t('close')}}</view>
				</view>
				<view class="padding-xl">
					{{settingError}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast.js'
	import myConfig from '@/myConfig.js'
	import *
	as deviceSettingApi from '@/api/iot/iotDeviceSettingApi.js'
	import *
	as deviceSensorApi from '@/api/iot/iotDeviceSensorApi.js'
	import CameraList from '@/components/ztn-custom/CameraList/index.vue'
	import Explain from '@/components/ztn-custom/Explain/index.vue'
	import {
		listenWebSocket,
		leaveWebSocket
	} from '@/util/websocketUtil.js'
	import * as storage from '@/util/storage.js'
	export default {
		name:'DviceSensor',
		data() {
			return {
				sensorList: [],
				interval: null,
				enableEval: storage.getEnableEval(),
				showHidden: storage.getShowHidden(),
				getDateInfo: {
					show: false
				},
				settingError: '',
				showErrorModal: false,
				wsMonitor: {
					room: 'iot:device:' + this.deviceCore,
					onmessage: this.onSocketMsg
				}
			}
		},
		props: {
			deviceName: {
				type: String,
				default: ''
			},
			deviceCore: {
				type: String,
				default: ''
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		beforeDestroy(e) {
			this.unBindSocket()
		},
		mounted() {
			this.init()
			storage.setDeviceNavigationComponent('deviceSensor')
			this.bindSocket()
		},
		methods: {
			init() {
				this.getSensorList()
			},
			hideErrorModal() {
				this.showErrorModal = false
			},
			getDate() {
				showLoading(this.$t('loading'), true)
				const deviceCore = this.deviceCore
				deviceSettingApi.sendSetting({
					deviceCore: this.deviceCore,
					value: this.getDateInfo.value,
					keyName: this.getDateInfo.keyName,
					port: this.getDateInfo.port
				}).then((res) => {
					if (res.data) {
						showToast(this.$t('success'), 'none', 1000, true)
					} else {
						this.showErrorModal = true,
							this.settingError = res.msg
					}
					hideLoading()
				})
			},
			bindSocket() {
				this.wsMonitor.room = 'iot:device:' + this.deviceCore
				listenWebSocket(this.wsMonitor)
			},
			unBindSocket() {
				leaveWebSocket(this.wsMonitor)
				clearInterval(this.interval)
				this.interval = null
			},
			onSocketMsg(nowData) {
				if (nowData.type == 'deviceData') {
					const data = JSON.parse(nowData.msg);
					if (data.deviceUpload) {
						if (data.deviceUpload.sensorList && data.deviceUpload.sensorList.length > 0) {
							data.deviceUpload.sensorList.forEach(sensor => {
								this.sensorList.forEach(deviceSensor => {
									if (sensor.port === deviceSensor.port) {
										if (sensor.explainList && sensor.explainList.length > 0 &&
											deviceSensor.explainList && deviceSensor.explainList
											.length > 0) {
											sensor.explainList.forEach(explain => {
												for (let i = 0, j = deviceSensor
														.explainList
														.length; i < j; i++) {
													const deviceExplain = deviceSensor
														.explainList[i]
													if (explain.keyName === deviceExplain
														.keyName) {
														deviceExplain.value = this
															.enableEval ?
															explain.value : explain
															.rawValue
														deviceExplain.valueDate = data.deviceUpload
															.timestamp
														deviceSensor.explainList.splice(i,
															1,
															deviceExplain)
													}
												}
											})
										}
									}
								})
							})
						}
					}
				}
			},
			getSensorList(e) {
				deviceSensorApi.getListWith({
					deviceCore: this.deviceCore,
					withExplain: true,
					withParam: false,
					withSetting: true,
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						const sensorList = []
						data.forEach(sensor => {
							if (sensor.settingList) {
								sensor.settingList.forEach(setting => {
									if (setting.keyName === 'getData') {
										if (setting.port === '0' || !this.getDateInfo
											.show) {
											this.getDateInfo = {
												show: true,
												...setting
											}
										}
									}
								})
							}
							if (!this.showHidden && sensor.hidden) {
								return
							}
							if (!sensor.explainList) {
								return
							}
							const explainList = []
							sensor.explainList.forEach(explain => {
								if (!this.showHidden && explain.hidden) {
									return
								}
								if (explain.value && explain.value.length > 9 || explain.name
									.length > 8 ||
									explain.remark.length > 8 || explain.warnNum > 0) {
									explain.isFullLine = true
								} else {
									explain.isFullLine = false
								}
								explainList.push(explain)
							})
							sensor.explainList = explainList
							if (sensor.explainList.length > 0) {
								sensorList.push(sensor)
							}

						})
						this.sensorList = sensorList
					} else {
						showToast(this.$t('not') + this.$t('data'), 'none', 1000, false)
					}
				})
			}
		},
		components: {
			CameraList,
			Explain
		},
	}
</script>
